<template>
  <div class="login_wrapper">
    <div class="login">
      <el-form :model="formLogin">
        <el-form-item>
          <h2 class="title">后台管理系统</h2>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formLogin.loginName" placeholder="账号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="formLogin.password" placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login">登陆</el-button>
          <span v-show="this.errorInfo.isShowError" class='error'> {{this.errorInfo.text}} </span>
        </el-form-item>
      </el-form>

    </div>
    <p class="bei">京ICP备18050367号-1</p>
    <!--<p class='recover' @click="rollBackTables">如果登陆失败,点此恢复数据</p>-->
  </div>
</template>
<script>
  import api from '../api/apis';
  import {UPDATE_TOKEN} from '../store/components/consts'

  export default {
    name: 'login',
    data() {
      return {
        formLogin: {   //表单对象
          loginName: 'admin',
          password: '123456'
        },
        errorInfo: {
          text: '登陆失败,请重试',
          isShowError: false //显示错误提示
        }
      }
    },
    mounted() {
      document.onkeydown = (event) => {
        var e = event || window.event || arguments.callee.caller.arguments[0];
        if (e && e.keyCode == 13 && this.$route.path == '/login') { // enter 键
          this.login();
        }
      };
    },
    methods: {
      login() {

        // this.$store.dispatch("Login", this.formLogin).then(data => {
        //
        //   if (data && data.data) {
        //     let json = data.data;
        //     if (json.status === 'SUCCESS') {
        //       this.$router.replace({path: "/index"});
        //     } else if (json.message) {
        //       this.errorInfo.text = json.message;
        //       this.errorInfo.isShowError = true;
        //     }
        //   }
        //
        // }).catch((err) => {
        //   console.log('error:', err);
        //   this.errorInfo.isShowError = true;
        //   this.errorInfo.text = '系统接口异常';
        // });

        //调用后端登陆接口
        api.shiroApi.loginIn(this.formLogin)
          .then((data) => {
            console.log('success:', data);

            if (data && data.data) {
              var json = data.data;
              if (json.status === 'SUCCESS') {

                this.$common.setSessionStorage(UPDATE_TOKEN, json.data.userInfo.token);
                this.$common.setSessionStorage('username', json.data.userInfo.userName);
                // this.$common.setSessionStorage('avatar', json.data.userInfo.avatar);
                this.$common.setSessionStorage('lev', json.data.sysRoleVoList);

                this.$store.commit(UPDATE_TOKEN, json.data.userInfo.token);
                //存入菜单,渲染菜单
                this.$store.dispatch("add_Menus", json.data.sysMenuVoList);
                //动态设置路由
                this.$store.dispatch("add_Routes", json.data.sysMenuVoList);

                this.$router.replace({path: "/index"});
              } else if (json.message) {
                this.errorInfo.text = json.message;
                this.errorInfo.isShowError = true;
              }
            }
          }).catch((err) => {
          console.log('error:', err);
          this.errorInfo.isShowError = true;
          this.errorInfo.text = '系统接口异常';
        });
      }
      ,
    }
  }
</script>

<style lang="scss" scoped>
  $input_width: 300px;

  .login_wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;

    .login {
      width: 460px;
      height: 296px;
      margin-top: -150px;
      border: 1px solid #eaeaea;
      box-shadow: 0 0 25px #cac6c6;

      .title {
        text-align: center;
        color: #505458;
      }

      .el-form-item__content {
        width: $input_width;
      }

      .el-button {
        width: $input_width;
      }

      .el-form {
        margin: 30px 80px auto 80px;

        .error {
          display: block;
          text-align: center;
          color: red;
        }
      }
    }
  }

  .bei {
    position: absolute;
    bottom: 20px;
    cursor: pointer;
    color: #505458;
  }
</style>
